<template>
  <v-dialog
    v-model="twofactorcodesettings"
    :fullscreen="$vuetify.breakpoint.xsOnly"
    hide-overlay
    max-width="600px"
    persistent
  >
  <v-dialog v-model="message_dialog" max-width="290" persistent>
      <v-card>
        <v-card-title class="headline">绑定成功</v-card-title>

        <v-card-text>您现在已经成功开启两步验证</v-card-text>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            
            color="primary"
            text
            @click="onflush"
          >{{$t("message.ok")}}</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-card>
      <v-toolbar dark color="primary">
        <v-btn icon dark @click="Close_Twofactorcode">
          <v-icon>mdi-close</v-icon>
        </v-btn>
        <v-toolbar-title>{{$t("message.settwofactorcode")}}</v-toolbar-title>
      </v-toolbar>
      <v-container v-if="isON">
        <div style="text-align:center;">
          <div height="500px" flat>
            <br />
            <br />
            <p class="display-2">您已开启两步验证</p>
            <br />
            <br />
            <v-icon size="200">mdi-shield-key</v-icon>
            <br />
            <br />
            <br />
            <p class="subtitle-1">任何登录账户的设备都需要您的设备验证码</p>

            <br />
            <v-btn color="primary" fab x-large @click="Close_Twofactorcode">
              <v-icon>mdi-check</v-icon>
            </v-btn>
            <br />
            <v-btn color="primary" text x-large @click="Close_Code">关闭两步验证（不安全）</v-btn>
            <br />
            <br />
          </div>
        </div>
      </v-container>
     
        <v-stepper v-else v-model="codestep">
           <v-stepper-header>
          <v-stepper-step :complete="codestep > 1" step="1"></v-stepper-step>

          <v-divider></v-divider>

          <v-stepper-step :complete="codestep > 2" step="2"></v-stepper-step>

          <v-divider></v-divider>

          <v-stepper-step step="3"></v-stepper-step>
        </v-stepper-header>
        <v-stepper-items>
          <v-stepper-content step="1">
        <div style="text-align:center;">
        <div height="500px" flat>
            <br />
            <br />
            <p class="display-2">启用两步验证</p>
            <br />
            <br />
            <v-icon size="200">mdi-cellphone-key</v-icon>
            <br />
            <br />
            <br />
            <p class="subtitle-1">绑定一部安卓设备，任何登录账户的设备都需要您的设备验证码</p>

            <br />
            <v-btn color="primary" fab x-large @click="codestep = 2">
              <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
            <br />
            <br/>
            <v-btn color="primary" text x-large @click="Close_Twofactorcode()">{{$t("message.cancel")}}</v-btn>
         
          </div>
        </div>
          </v-stepper-content>
        </v-stepper-items>
        <v-stepper-items>
        <v-stepper-content step="2">
        <div style="text-align:center;">
        <div height="500px" flat>
            <br />
            <br />
            <p class="display-2">下载"医慕验证器"应用</p>
            <br />
            <br />
            <img width=200 :src="qrcodeapp">
            <br />
            <br />
            <br />
            <p class="subtitle-1">扫描二维码开始下载（Android）</p>

            <br />
            <v-btn color="primary" fab x-large @click="getQRcode">
              <v-icon>mdi-chevron-right</v-icon>
            </v-btn>
            <br />
            <br/>
            <v-btn color="primary" text x-large @click="codestep = 1">{{$t("message.back")}}</v-btn>

          </div>
        </div>
          </v-stepper-content>
        </v-stepper-items>
        <v-stepper-items>
        <v-stepper-content step="3">
        <div style="text-align:center;">
        <div height="500px" flat>
            <br />
            <br />
            <p class="display-2">用"医慕验证器"扫描下面二维码</p>

            
            <v-img class="ma-11" position="center center" max-height="150" contain :src="qrcode">
            <template v-slot:placeholder>
                    <v-row class="fill-height ma-0" align="center" justify="center">
                      <v-progress-circular indeterminate color="primary"></v-progress-circular>
                    </v-row>
            </template>
            </v-img>
             
            <v-checkbox
        v-model="opencode"
        label="请确认绑定完成后再点击确定！请不要把该码发送给任何人！"
        required
      ></v-checkbox>
            <br />
            <v-btn :loading="loading" color="primary" fab x-large :disabled="!opencode" @click="enable_code">
              <v-icon>mdi-check</v-icon>
            </v-btn>
            <br />
            <br/>
            <v-btn color="primary" text x-large @click="codestep = 2">{{$t("message.back")}}</v-btn>

          </div>
        </div>
          </v-stepper-content>
        </v-stepper-items>
        </v-stepper>
      
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data: () => ({
    message_dialog:false,
    isON: "",
    codestep:1,
    qrcode:'',
    qrcodeapp:'http://47.100.137.177:1024/android/down.png',
    opencode:false,
    secret:'',
    loading:false,
  }),
  computed: {
    twofactorcodesettings: {
      get: function() {
        return this.$store.state.twofactorcodesettings;
      }
    }
  },
  methods: {
    Close_Twofactorcode() {
      this.$store.commit("change_twofactorcodesettings", false);
      this.codestep=1;
    },
    Close_Code() {
      
      var loginBean = new URLSearchParams();
      loginBean.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/mysettfknull",
        data: loginBean
      })
        .then(response => {
          this.$cookies.set("twofactorcode",false,Infinity);
          this.Close_Twofactorcode();
          this.onflush();
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    getQRcode(){
      this.codestep=3;
      var loginBean = new URLSearchParams();
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/mydoubleverify",
        data: loginBean
      })
        .then(response => {
          var data=JSON.parse(response.data);
          console.log(data);
          this.qrcode=data.url;
          this.secret=data.secret;
          console.log(this.qrcode);
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    enable_code(){
      this.lodaing=true;
      var loginBean = new URLSearchParams();
      console.log(this.$cookies.get("user"));
       loginBean.append("uid", this.$cookies.get("user")); //你要传给后台的参数值 key/value
      loginBean.append("secret", this.secret);
      this.$axios({
        method: "post",
        url: "http://47.100.137.177:8080/YimooBP1.0/mysavetfkey",
        data: loginBean
      })
        .then(response => {
          this.message_dialog=true;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    onflush(){
      location.reload();
    }
  },
  mounted() {
    if (this.$cookies.get("twofactorcode")=="true") {
      console.log(this.$cookies.get("twofactorcode"))
      this.isON = true;
    } else {
      this.isON = false;
    }

  }
};
</script>

<style>
</style>